= javascript_tag nonce: content_security_policy_nonce do
  :plain
    const enablePointerEvents = () =>{
      setTimeout(()=>{
        document.getElementById('container').classList.remove('gl-pointer-events-none');
      },500)
    }

    window.addEventListener('focus', enablePointerEvents, {once: true});
    window.addEventListener('mousemove', enablePointerEvents, {once: true});

#container.gl-ml-auto.gl-mr-auto.gl-pointer-events-none{ class: '@sm/panel:gl-w-1/2' }
  .gl-items-center
    .gl-text-size-h1
      = safe_format(_('%{strong_start}%{client_name}%{strong_end} is requesting access to your account on %{title}.'),
        { client_name: @pre_auth.client.name, title: brand_title },
        tag_pair(tag.strong, :strong_start, :strong_end))
    .gl-flex.gl-items-center.gl-gap-2.gl-py-5
      = render Pajamas::AvatarComponent.new(current_user, size: 24, avatar_options: { data: { testid: 'user_avatar_content' }, title: current_user.username })
      .gl-pl-1
        %strong= current_user.name
      &middot;
      .gl-text-subtle
        %span= current_user.to_reference
  - if current_user.admin?
    = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-5'}) do |c|
      - c.with_body do
        = safe_format(_('You are an administrator, which means authorizing access to %{strong_start}%{client_name}%{strong_end} will allow it to interact with GitLab as an administrator as well.'),
          { client_name: @pre_auth.client.name },
          tag_pair(tag.strong, :strong_start, :strong_end))
  - if @pre_auth.scopes
    - @pre_auth.scopes.each do |scope|
      .js-experimental-setting-accordion.gl-mb-5
        - title = t(scope, scope: [:doorkeeper, :scopes])
        - description = t(scope, scope: [:doorkeeper, :scope_desc])
        = render Pajamas::AccordionItemComponent.new(title: title, state: :closed, button_options: { class: '!gl-text-default gl-font-bold' }) do
          .gl-text-subtle.gl-text-sm
            = description
  .info-well
    .well-segment
      - if Gitlab.com? && !@pre_auth.client.application.owner && !@pre_auth.client.application.dynamic?
        %p.gl-text-success
          = sprite_icon('tanuki-verified', css_class: 'gl-fill-icon-success')
          = _('This application is provided by GitLab.')
      - else
        %p.gl-text-warning
          = sprite_icon('warning-solid')
          = safe_format(_('Make sure you trust %{strong_start}%{client_name}%{strong_end} before authorizing.'),
            { client_name: @pre_auth.client.name },
            tag_pair(tag.strong, :strong_start, :strong_end))
      %p
        = safe_format(_('%{owner} %{created_date} ago.'),
          { owner: auth_app_owner_text(@pre_auth.client.application),
            created_date: time_ago_in_words(@pre_auth.client.application.created_at) })
        - domain = URI.parse(@pre_auth.redirect_uri).host.gsub(/^www\./, '')
        - if @pre_auth.redirect_uri.start_with?('http://', 'https://') && domain != 'localhost'
          = safe_format(_('You will be redirected to %{strong_start}%{domain}%{strong_end} after authorizing.'),
            { domain: domain }, tag_pair(tag.strong, :strong_start, :strong_end))
  %div
    = form_tag oauth_authorization_path, method: :post, class: 'gl-inline-block gl-pr-3' do
      = hidden_field_tag :client_id, @pre_auth.client.uid
      = hidden_field_tag :redirect_uri, @pre_auth.redirect_uri
      = hidden_field_tag :state, @pre_auth.state
      = hidden_field_tag :response_type, @pre_auth.response_type
      = hidden_field_tag :scope, @pre_auth.scope
      = hidden_field_tag :nonce, @pre_auth.nonce
      = hidden_field_tag :code_challenge, @pre_auth.code_challenge
      = hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method
      = render Pajamas::ButtonComponent.new(type: :submit,
        variant: :confirm,
        button_options: { data: { testid: 'authorization-button' }}) do
        = safe_format(_('Authorize %{client_name}'), { client_name: @pre_auth.client.name })
    = form_tag oauth_authorization_path, method: :delete, class: 'gl-inline-block' do
      = hidden_field_tag :client_id, @pre_auth.client.uid
      = hidden_field_tag :redirect_uri, @pre_auth.redirect_uri
      = hidden_field_tag :state, @pre_auth.state
      = hidden_field_tag :response_type, @pre_auth.response_type
      = hidden_field_tag :scope, @pre_auth.scope
      = hidden_field_tag :nonce, @pre_auth.nonce
      = hidden_field_tag :code_challenge, @pre_auth.code_challenge
      = hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method
      = render Pajamas::ButtonComponent.new(type: :submit) do
        = _('Cancel')
